<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="/lib/jquery.min.js"></script>-->
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>

<body>
<div class="outest" style="margin:0 auto; width: 90%; height:820px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><a href="/clothes_index_page">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">用户管理</template>
                        <el-menu-item index="2-1"><a href="/user_list_page">所有用户</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">服装管理</template>
                        <el-menu-item index="3-1"><a href="/clothes_list_page">所有服装</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">仓库管理</template>
                        <el-menu-item v-for="item, index in authinstocks" :index="item.id">
                            {{item.name}}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right">
                        <template slot="title"><el-avatar :src="imgUrl"></el-avatar>&nbsp;我</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">退出</el-menu-item>
                    </el-submenu>
                    <div style="clear: both"></div>
                </el-menu>
            </el-header>

            <el-main>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="入库管理" name="first"></el-tab-pane>
                        <el-tab-pane label="出库管理" name="second"></el-tab-pane>
                    </el-tabs>
                </template>
                <div style="height: 30px; float: left; padding-top: 3px"><el-button type="success" plain size="medium" @click.native="addInstockPage()">添加入库信息</el-button></div>
                <div style="margin-left: 20px; float: left">
                    <el-select v-model="query.citem" placeholder="请选择产品名称">
                        <el-option
                                v-for="item in clothesList"
                                :key="item.citem"
                                :label="item.cname"
                                :value="item.citem">
                        </el-option>
                    </el-select>
                </div>
                <div style="margin-left: 20px; float: left">
                    <el-select v-model="query.operator" placeholder="请选择经办人">
                        <el-option
                                v-for="item in operators"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </div>
                <div style="margin-left: 20px; float: left">
                    <el-select v-model="query.source" placeholder="请选择来源">
                        <el-option
                                v-for="item in sources"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </div>
                <div style="margin-left: 20px; float: left">
                    <el-date-picker
                            v-model="query.first_indate"
                            type="date"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择起始日期">
                    </el-date-picker>
                </div>
                <div style="margin-left: 20px; float: left">
                    <el-date-picker
                            v-model="query.end_indate"
                            type="date"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择截至日期">
                    </el-date-picker>
                </div>
                <div style="margin-left: 20px; height: 30px; float: left; padding-top: 3px"><el-button type="primary" plain size="medium" @click.native="handleCurrentChange(1)">搜索</el-button></div>
                <div style="margin-left: 20px; height: 30px; float: left; padding-top: 3px"><el-button type="info" plain size="medium" @click.native="reSet()">重置</el-button></div>
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                label="单据编号"
                                prop="isitem">
                        </el-table-column>
                        <el-table-column
                                label="产品名称"
                                prop="clothes.cname">
                        </el-table-column>
                        <el-table-column
                                label="数量"
                                prop="num">
                        </el-table-column>
                        <el-table-column
                                label="进货价"
                                prop="price">
                        </el-table-column>
                        <el-table-column
                                label="合计"
                                prop="sum">
                        </el-table-column>
                        <el-table-column
                                label="所入仓库"
                                prop="depot.name">
                        </el-table-column>
                        <el-table-column
                                label="入库日期"
                                prop="indate">
                        </el-table-column>
                        <el-table-column
                                label="经办人"
                                prop="operator">
                        </el-table-column>
                        <el-table-column
                                label="来源"
                                prop="source">
                        </el-table-column>
                        <el-table-column
                                align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                        v-model="search"
                                        size="mini"
                                        @keyup.enter.native="handleCurrentChange(1)"
                                        placeholder="输入关键字搜索"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <div class="block">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="size"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-main>

            <el-footer>
                版权所有 &nbsp;&nbsp;&nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            activeIndex: '4-1',
            search: '',
            pageable:{},
            tableData:[],
            clothesList:[],
            operators:[],
            sources:[{id:1, name:"来源1"}, {id:2, name:"来源2"}, {id:3, name:"其它"}],
            total:0,
            currentPage: 1,
            size:8,
            depotid:'',
            account:'',
            authinstocks:[],
            imgUrl:'',
            id:'',
            activeName: 'first',
            query:{
                first_indate:'',
                end_indate:'',
                citem:'',
                operator:'',
                source:'',
                depotid:''
            }
        },
        mounted: function () {
            this.depotid = this.getUrlSearch("depotid");
            this.query.depotid = this.depotid;
            this.handleCurrentChange(this.currentPage);
            this.getuser();
            this.getClothesList();
            this.getOperatorsList();
        },
        methods:{
            reSet: function(){
                this.query = {
                    first_indate:'',
                    end_indate:'',
                    citem:'',
                    operator:'',
                    source:'',
                    depotid:this.depotid
                }
            },
            getClothesList: function(){
                var url = "clothes/clothesList";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.clothesList = res.data;
                    }else {
                        console.log(res.msg);
                    }
                })
            },
            getOperatorsList: function(){
                var url = "user/userlist";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.operators = res.data;
                    }else {
                        console.log(res.msg);
                    }
                })
            },
            logout: function () {
                var obj = this;
                var url = "login/out";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '登出成功!'
                        });
                        vue.jump("login_page");
                    }else {
                        console.log("登出失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            getuser: function(){
                var obj = this;
                var url = "login/getuser";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        var id = res.data.id;
                        var time = new Date().getTime();
                        vue.id = res.data.id;
                        vue.account = res.data.account;
                        vue.imgUrl = "images/user/" + id + ".jpg?timestamp=" + time;
                        console.log("this.imgUrl:" + vue.imgUrl);
                        vue.getauthinstock(vue.account);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            getauthinstock: function(account){
                console.log("account:" + account);
                var obj = this;
                var url = "login/getauthorInstock/" + account;
                console.log("url:" + url)
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.authinstocks = res.data;
                        console.log("vue.authinstocks:" + vue.authinstocks);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            handleSelect(key, keyPath) {
                console.log("key:" + key);
                console.log("keyPath:" + keyPath);
                if(keyPath[0]==4){
                    window.location.href = "instock_list_page?depotid=" + key;
                }
                if(key=="5-1"){
                    var url = "user_center_page?id=" + this.id;
                    window.location.href = url;
                }
                if(key=="5-2"){
                    this.logout();
                }
                this.activeIndex = key;
            },
            addInstockPage: function(){
                window.location.href = "instock_add_page?depotid=" + this.depotid;
            },
            //表格
            handleEdit: function(index, row) {
                console.log(index);
                console.log(row.isitem);
                var url = "instock_edit_page?isitem=" + row.isitem;
                window.location.href = url;
            },
            handleDelete: function(index, row) {
                var obj = this;
                console.log(index, row.isitem);
                var url = "instock/del/" + row.isitem + "/";
                console.log("url:" + url);
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(url).then(function (response) {
                        var res = response.data;
                        if(res.success){
                            obj.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vue.handleCurrentChange(vue.currentPage);
                        }else {
                            obj.$message.error({
                                type: 'fail',
                                message: res.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //分页
            handleCurrentChange: function(page) {
                this.currentPage = page;
                var size = this.size;
                var url = "instock/list/" + page + "/" + size;
                var str = this.mergeUrl(this.query);
                url += str;
                console.log("str:" + url + str);
                axios.get(url).then(function (response) {
                    var res = response.data;
                    // var q = vue.query;
                    if(res.success){
                        vue.tableData = res.data.list;
                        vue.total = res.data.total;
                        console.log("mybatis分页");
                    }else {
                        console.log("获取入库列表失败");
                    }
                });
            },
            mergeUrl: function(obj) {
                let result = '';
                let item;
                for (item in obj) {
                    if (obj[item] && String(obj[item])) {
                        result += `&${item}=${obj[item]}`;
                    }
                }
                if (result) {
                    result = '?' + result.slice(1);
                }
                return result;
            },
            //通过正则表达式获取地址栏参数
            getUrlSearch: function(name) {
                // 未传参，返回空
                if (!name) return null;
                // 查询参数：先通过search取值，如果取不到就通过hash来取
                var after = window.location.search;
                after = after.substr(1) || window.location.hash.split('?')[1];
                // 地址栏URL没有查询参数，返回空
                if (!after) return null;
                // 如果查询参数中没有"name"，返回空
                if (after.indexOf(name) === -1) return null;

                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                // 当地址栏参数存在中文时，需要解码，不然会乱码
                var r = decodeURI(after).match(reg);
                // 如果url中"name"没有值，返回空
                if (!r) return null;

                return r[2];
            },
            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            },
            handleClick(tab, event) {
                console.log(tab, event);
                console.log("name:" + tab.name);
                var select = tab.name;
                if(select=="first"){
                    console.log("本页");
                }
                if(select=="second"){
                    window.location.href = "outstock_list_page?depotid=" + this.depotid;
                }
            }
        }
    })
</script>
</body>
</html>